<template>
	<basic-container>
		<el-row :gutter="20">
			<el-col :span="4">
				<avue-tree :option="treeoption" :data="treedata" @node-click="nodeClick" v-model="treeform">
				</avue-tree>
			</el-col>
			<el-col :span="20">
				<avue-crud :option="option" :data="data" :page="page" ref="crud" v-model="form" :before-open="beforeOpen" @row-del="rowDel"
				 @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
				 @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
				</avue-crud>
			</el-col>
		</el-row>
	</basic-container>
</template>

<script>
	import {
		remove,
		update,
		add,
		getList,
		condition
	} from "@/api/flw/forms";
	import {
		getCodes
	} from "@/api/system/dict";

	export default {
		data() {
			return {
				treeform: {},
				treedata: [],
				treeoption: {
					nodeKey: 'id',
					size: 'small',
					props: {
						label: 'name',
						value: 'code'
					},
					menu: false,
					addBtn: false
				},
				form: {
					typeCode: ''
				},
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				selectionList: [],
				option: {
					tip: false,
					border: true,
					index: true,
					refreshBtn: false,
					searchBtn: false,
					menuWidth: 150,
					viewBtn: false,
					column: [{
							label: "字段ID",
							prop: "id",
							hide: true,
							disabled: true,
							placeholder: "系统自动生成"
						},
						{
							label: "表单分类",
							prop: "typeCode",
							type: "select",
							width: "120px",
							dicData: [],
							props: {
								value: "code",
								label: "name"
							},
							rules: [{
								required: true,
								message: "请选择字段分类",
								trigger: "click"
							}]
						},
						{
							label: "字段名称",
							prop: "name",
							width: "150px",
							rules: [{
								required: true,
								message: "请输入字段名称",
								trigger: "blur"
							}]
						},
						{
							label: "字段编码",
							prop: "field",
							width: "150px",
							rules: [{
								required: true,
								message: "请输入字段编码",
								trigger: "blur"
							}]
						},
						{
							label: "字段备注",
							prop: "remark",
							type: "textarea",
							span: 24
						}
					]
				},
				data: []
			};
		},
		computed: {},
		created() {
			getCodes('CODE200713').then(res => {
				const data = res.data.data;
				this.treedata = data;
				this.findObject(this.option.column, 'typeCode').dicData = data;
			});
		},
		methods: {
			refreshChange() {
				getList().then(res => {
					const data = res.data.data;
					this.treedata = data;
					// const index = this.$refs.crud.findColumnIndex("typeCode");
					// this.option.column[index].dicData = data;
					this.option.column[1].dicData = data;
				});
			},
			nodeClick(data) {
				this.form.typeCode = data.code;
				this.query.typeCode = this.form.typeCode
				this.onLoad(this.page, this.query);
			},
			beforeOpen(done, type) {
				if (["add"].includes(type)) {
					this.form.typeCode = this.query.typeCode
				}
				done();
			},
			rowSave(row, loading, done) {
				add(row).then(() => {
					loading();
					this.query.typeCode = this.form.typeCode
					this.onLoad(this.page, this.query);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				update(row).then(() => {
					loading();
					this.query.typeCode = this.form.typeCode
					this.onLoad(this.page, this.query);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page, params);
				done();
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page, params = {}) {
				condition(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
